<%@ page import="java.util.List" %>
<%@ page import="com.google.gson.Gson" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>任务管理</title>

    <!-- 引入Bootstrap  的css样式库  以及js封装的框架库-->
    <link href="css/bootstrap.css" rel="stylesheet">
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/mottos.css">
    <link rel="stylesheet" href="css/show.css">
    <link rel="icon" href="images/12.ico">
</head>
<body>

<%
    int uid = session.getAttribute("uid")==null?0:Integer.parseInt(session.getAttribute("uid").toString());
    if (uid == 0) {
        response.sendRedirect("login.jsp");
        return;
    }

    List<String> mottos = (List<String>) session.getAttribute("mottos");
    // 将 mottos 转换为 JSON 格式的字符串
    String jsonMottos = new Gson().toJson(mottos);
%>
<input type="hidden" name="showPage" id="showPage" value="${showPage}">

<%--    引入导航  ctrl + alt + -号,折叠代码  --%>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="getTask.jsp" target="_parent">首页·计划管理</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a target="_parent" href="TaskLineServlet">任务成就</a></li>
                <li><a target="_parent" href="ProSpectServlet?what=query">布局·规划</a></li>
                <li><a target="_parent" href="URLServlet?what=query">重要网址</a></li>
                <li><a target="_parent" href="NoteServlet?what=query">重要记事</a></li>
                <li><a target="_parent" href="mottos.jsp">感悟·格言</a></li>
                <li><a target="_parent" href="bookNotes.jsp">读书笔记</a></li>

            </ul>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a target="_parent" id="login_out">
                    <%   String uname = (String) session.getAttribute("uname");
                    String welcomeMessage = "欢迎,登录";
                    if (uname != null && !uname.isEmpty()) {
                        welcomeMessage = "欢迎," + uname + "[退出登录]";
                    }
                    out.print(welcomeMessage);
                %>
                </a></li>
                <li><a target="_parent" href="regist.jsp">注册</a></li>
                <li><a target="_parent" href="#">会员中心</a></li>
                <li><a target="_parent" href="Contact_us.jsp">联系我们</a></li>
            </ul>
        </div>
    </div>
</nav>
<%--    格言显示div  --%>
<div id="motto">
    <div class="scroll-container">
        <span id="st1" class="scroll-text"></span>
       <%-- <span id="st2" class="scroll-text"></span>
        <span id="st3" class="scroll-text"></span>
        <span id="st4" class="scroll-text"></span>--%>
    </div>
</div>

<div id="task_header">
    <h1 id="task_title"> 工作学习计划管理系统 </h1>
    <h4 id="task_str" class="task_str">${taskStr}</h4>
</div>
<div id="outer">
    <div id="toggleButtons">
        <h4>工作学习计划管理系统</h4>
        <h5 class="task_str">${taskStr}</h5>
        <button id="toggleAddTask">未完成任务列表</button>
        <button id="toggleCompletedTasks">已完成任务列表</button>
    </div>
    <div id="left" class="active">
        <div id="addTaskDiv">
            <a class="a_task" href="#">添加任务:</a>
            <input type="text" id="taskInput" placeholder=" 输入任务内容">
            <button id="addTaskBtn">添加任务</button>
        </div>
        <h2 id="taskListTitle">未 完 成 任 务 列 表 </h2>
        <ul id="taskList">
            <c:forEach items="${uf_list}" var="task">
                <li><span class="glyphicon glyphicon-grain taskNum"> </span>
                    <a class="taskName ufTaskName"
                       href="detileTask.jsp?id=${task.id}&title=${task.title}&finished=${task.finished}"
                    >${task.title}</a>
                    <span class="taskStatus">
                        <input type="checkbox" class="task_finish" name="task${task.id}" id="t_id${task.id}"
                               value="${task.id}"> <label
                            for="t_id${task.id}"> 完成</label>
                        <a href="DelServlet?tid=${task.id}">[删除任务]</a>
                    </span>
                </li>
            </c:forEach>
        </ul>

        <div id="ufPageNav">
            <nav>
                <ul class="pager">
                    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> 上一页 </a></li>
                    <span class="pageNumShow">第<span id="ufPage">${ufPage}</span>页
                        / 共<span id="ufTotalPage">${ufTotalPage}</span>页</span>
                    <li class="next"><a href="#"> 下一页 <span aria-hidden="true">&rarr;</span></a></li>
                </ul>
            </nav>
        </div>
    </div>
    <div id="right" class="active">
        <h2>已 完 成 任 务 列 表</h2>
        <ul id="completedTaskList">
            <c:forEach items="${f_list}" var="task">
                <li><span class="taskNum glyphicon glyphicon-ok-sign"> </span>
                    <a class="taskName fTaskName"
                       href="detileTask.jsp?id=${task.id}&title=${task.title}&finished=${task.finished}"
                    >${task.title}</a>
                    <span class="taskStatus">  已完成  <a href="DelServlet?tid=${task.id}">[删除任务]</a> </span>
                </li>
            </c:forEach>
        </ul>

        <div id="fPageNav">
            <nav>
                <ul class="pager">
                    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> 上一页 </a></li>
                    <span class="pageNumShow">
                         <span class="pageNumShow">第 <span id="fPage">${fPage}</span>页 / 共<span id="fTotalPage">${fTotalPage}</span>页</span>
                    </span>
                    <li class="next"><a href="#"> 下一页 <span aria-hidden="true">&rarr;</span></a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>

<footer id="footer" style="background-color: #eecdee; "  class="navbar-fixed-bottom  text-center">
    <!--                <a target="_blank" href="#">友情链接</a>-->
    <a target="_blank" href="https://beian.miit.gov.cn">京ICP备2024085356号</a>  &nbsp; | &nbsp;
    <img src="images/beian.png" alt="" width="16px" height="16px">
    <a href="https://beian.mps.gov.cn/#/query/webSearch?code=11011402054364"
       rel="noreferrer" target="_blank">京公网安备11011402054364 </a> &nbsp;| &nbsp;
    <a id="ban_quan" target="_self" href="#"> &copy; 2024 凡尘先生 </a>
</footer>

</body>

<script src="js/show/changeTask.js"></script>
<script>
    // 初始化 mottos 变量为从服务器传输过来的 JSON 字符串
    const mottos = <%= jsonMottos %>;
    const scrollText = $('.scroll-text');
    // 当滚动开始时，显示文本并更新内容
    scrollText.each(function () {
        $(this).on('animationstart', function () {
            // 更新内容在动画开始时
            const newMotto = mottos[Math.floor(Math.random() * mottos.length)];
            $(this).text(newMotto); // 更新文本
            $(this).css('opacity', '1'); // 开始动画时显示文本
            $(this).css('left', '100%'); // 确保文本位置在右边
        });
        // 当滚动到最左边时，重新回到最右边开始滚动
        $(this).on('animationiteration', function () {
            const newMotto = mottos[Math.floor(Math.random() * mottos.length)];
            $(this).text(newMotto); // 更新文本
            $(this).css('opacity', '0'); // 重新定位后隐藏文本
        });
    });

    $("#login_out").click(function () {
        let b = confirm("确定退出当前账号的登录吗?");
        if (b) {
            //删除浏览器中的cookie信息
            document.cookie = "task_uid=;expires=" + new Date(0).toUTCString();
            document.cookie = "task_uname=;expires=" + new Date(0).toUTCString();
            location.href = "login.jsp";
        }
    });
</script>
</html>












